<template>
	<view class="apply-detail">
		<view class="apply-detail-list">
			<!-- <view class="apply-tips">* 店端若需参加集训，参加人数为<text style="color: red;">3</text>人，<text style="color: red;">总经理或副总经理必须参加</text>，其余岗位为服务经理、客服经理</view> -->
			<uni-notice-bar show-icon scrollable color="#008aff" background-color="#EAF2FF"
				text="①请报名参与线上培训课程的店端，线上培训后完成课后试卷答题；②专题课程内容将定期组织安排，店端可根据自店实际运营情况选择参与！" />
			<view class="create-item">
				<text class="info-item-title">店代码</text>
				<!-- <input class="info-item-input" type="text" placeholder-class="placeholderFontClass" placeholder="请输入店代码"
					v-model="shopidValue"> -->
				<qj-fuzzy-search class="info-item-input" ref="refFuzzySearch" :list="filShopList" placeholder="请输入店代码"
					@get-input-value="getInputValue" @confirm-value="confirmValue"></qj-fuzzy-search>
			</view>
			<view class="create-item">
				<text class="info-item-title">联系电话</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入联系电话" v-model="phone">
			</view>
			<!-- <view class="create-item">
				<text class="info-item-title">店名称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass" placeholder="请输入店名称"
					v-model="shopName">
			</view> -->
			<view class="apply-detail-item" v-for="(item, index) in applyWriteList" :key="index">
				<view class="item-title">
					<text class="item-title-left">参训人员{{index + 1}}</text>
					<!-- <text class="delete-text" @click="handleDeletePerson(index)" v-show="index > 0">删除</text> -->
					<van-icon class="delete-icon" @click="handleDeletePerson(index)" v-show="index > 0"
						name="delete-o" />
				</view>
				<view class="item-form">
					<view class="create-item">
						<text class="info-item-title">姓名</text>
						<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
							placeholder="请输入姓名" v-model="item.name">
					</view>
					<view class="create-item">
						<text class="info-item-title">岗位</text>
						<input class="info-item-input" type="text" @click="handleOpenRolePopup(index)"
							placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择职位"
							v-model="item.role">
						<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
					</view>
					<!-- <view class="create-item">
						<text class="info-item-title">联系电话</text>
						<input class="info-item-input" type="text" maxlength="11"
							placeholder-class="placeholderFontClass" placeholder="请输入联系电话" v-model="item.tel">
					</view> -->
				</view>
			</view>

			<button class="add-btn" @click.stop.prevent="handleAddPerson">添加参训人员</button>
			<button class="submit-btn" @click.stop.prevent="handleSubmit">提交</button>
			<view class="overflow-height"></view>
		</view>

		<!-- 职位popup -->
		<van-popup :show="rolePopShow" position="bottom">
			<van-picker show-toolbar :columns="roleNameList" @confirm="onRoleConfirm" @cancel="rolePopShow = false" />
		</van-popup>

		<van-popup :show="fixedRolePopShow" position="bottom">
			<van-picker show-toolbar :columns="fixedRoleNameList" @confirm="onFixedRoleConfirm"
				@cancel="fixedRolePopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	import getDateTime from '@/common/getDateTime.js';
	import QjFuzzySearch from '@/packageA/components/qj-fuzzy-search/qj-fuzzy-search.vue';
	import debounce from '@/packageA/components/qj-fuzzy-search/debounce.js'; //防抖函数
	export default {
		components: {
			QjFuzzySearch
		},
		data() {
			return {
				list: [],
				searchValue: '',
				userOpenid: "",
				phone: "",
				rolePopShow: false,
				fixedRolePopShow: false,
				currentIndex: -1,
				roleNameList: ['总经理', '副总经理', '服务经理', '客服经理', '前台主管', '服务顾问', '客服专员'],
				fixedRoleNameList: ['总经理', '副总经理'],
				shopId: "",
				// shopName: "",
				applyWriteList: [{
					"id": "0",
					"name": "",
					"shopId": "",
					"role": "",
					"tel": "",
					"state": "0",
					"courseId": "",
					"softDelete": false,
					"createTime": "",
					"openId": ""
				}, {
					"id": "0",
					"name": "",
					"shopId": "",
					"role": "",
					"tel": "00000000000",
					"state": "0",
					"courseId": "",
					"softDelete": false,
					"createTime": "",
					"openId": ""
				}, {
					"id": "0",
					"name": "",
					"shopId": "",
					"role": "",
					"tel": "00000000000",
					"state": "0",
					"courseId": "",
					"softDelete": false,
					"createTime": "",
					"openId": ""
				}],
			}
		},
		computed: {
			shopidValue: {
				get: function() {
					return this.shopId;
				},
				set: function(val) {
					if (val) {
						this.shopId = val.toUpperCase();
					}
				},
			},
			filShopList() {
				return this.list.filter((p) => { //返回过滤后的数组
					return p.shopId.indexOf(this.searchValue) !== -1
				}) //filter是过滤函数去除了不包含关键字的情况
			}
		},
		onShow() {
			this.list = getApp().globalData.gacShopList;
		},
		onLoad(option) {
			this.userOpenid = option.openid;
		},
		methods: {
			// 获取到子组件输入框中输入的值
			getInputValue(e) {
				this.searchValue = e;
				this.shopId = e;
				debounce(this.getList, 500); //防抖 如果在项目中使用了uview-ui 则直接调用uview封装的防抖方法即可
			},
			// 通过子组件输入的值,发送请求,进行查询,获取列表
			getList() {
				if (this.searchValue) {
					this.$refs.refFuzzySearch.open();
				} else {
					this.$refs.refFuzzySearch.close();
				}
			},
			// 在父组件中拿到选中的值，以供父组件中的数据使用 示例{id:4,name:'北京理工大学'}
			confirmValue(e) {
				this.shopId = e.shopId;
			},
			handleOpenRolePopup(index) {
				this.rolePopShow = true;
				this.currentIndex = index;
			},
			onRoleConfirm(value) {
				console.log(value);
				this.applyWriteList[this.currentIndex].role = value.detail.value;
				this.rolePopShow = false;
			},
			onFixedRoleConfirm(value) {
				this.applyWriteList[this.currentIndex].role = value.detail.value;
				this.fixedRolePopShow = false;
			},
			handleAddPerson() {
				this.applyWriteList.push({
					"id": "0",
					"name": "",
					"shopId": "",
					"role": "",
					"tel": "00000000000",
					"state": "0",
					"courseId": "",
					"softDelete": false,
					"createTime": "",
					"openId": ""
				})
			},
			handleDeletePerson(index) {
				this.applyWriteList.splice(index, 1);
			},
			handleSubmit() {
				const applyInfo = uni.getStorageSync("subjectInfo");
				let timeStr = getDateTime.dateTimeStr('y-m-d h:i:s');
				let applyWriteList = this.applyWriteList;
				let canSubmit = true;
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (this.shopId.trim() == "") {
					getApp().showToast("店代码不能为空");
					canSubmit = false;
				} else if (this.phone.trim() == "") {
					getApp().showToast(`联系电话不能为空`);
					canSubmit = false;
				} else if (!reg.test(this.phone)) {
					getApp().showToast(`联系电话格式错误`);
					canSubmit = false;
				} else {
					applyWriteList[0].tel = this.phone;
					for (let i = 0; i < applyWriteList.length; i++) {
						applyWriteList[i].courseId = applyInfo.id;
						applyWriteList[i].createTime = timeStr;
						applyWriteList[i].openId = this.userOpenid;
						applyWriteList[i].shopId = this.shopId;
						// let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
						if (applyWriteList[i].name.trim() == "") {
							getApp().showToast(`参训人员${i + 1}的姓名不能为空`);
							canSubmit = false;
						} else if (applyWriteList[i].role == "") {
							getApp().showToast(`参训人员${i + 1}的岗位不能为空`);
							canSubmit = false;
						}
						// else if (applyWriteList[i].tel.trim() == "") {
						// 	getApp().showToast(`参训人员${i + 1}的联系电话不能为空`);
						// 	canSubmit = false;
						// } 
						// else if (!reg.test(applyWriteList[i].tel)) {
						// 	getApp().showToast(`参训人员${i + 1}的联系电话格式错误`);
						// 	canSubmit = false;
						// }
					}
					if (canSubmit) {
						console.log('提交数据', this.applyWriteList);
						getApp().showLoading();
						apiRqs._submitApplyInfo(this.applyWriteList).then((res) => {
							console.log('提交结果', res);
							uni.hideLoading();
							if (res.code == 200) {
								getApp().showToast("提交成功", "success");
								setTimeout(() => {
									uni.navigateBack();
								}, 1500)
							} else {
								getApp().showToast(res.msg);
							}
						}).catch((err) => {
							console.log('err', err);
						})
					}
				}

			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.apply-detail {
		.apply-detail-list {
			.add-btn {
				margin: 20px 15px;
				background-color: transparent;
				border: 1px solid #008aff;
				color: #008aff;
				font-size: 15px;
				height: 35pt;
				line-height: 35pt;
			}

			.submit-btn {
				margin: 20px 15px;
				border: none;
				background-color: #008aff;
				color: #fff;
				font-size: 15px;
				height: 35pt;
				line-height: 35pt;

				&:active {
					background-color: #0076DB;
				}
			}

			.overflow-height {
				height: 20px;
			}

			.apply-tips {
				font-size: 14px;
				color: #666;
				margin: 10px;
			}

			.apply-detail-item {
				.item-title {
					margin: 10px 15px;
					font-size: 14px;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.delete-text {
						color: #999;
					}

					.delete-icon {
						font-size: 16px;
						color: #999;
					}
				}
			}

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				height: 48px;
				line-height: 48px;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 0 15px;
				box-sizing: border-box;
				position: relative;

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}
		}
	}
</style>
